<template>
    <div class="detailed-plan">
      <div class="data-select">
        <div class="first-map item">
            <div class="date-item data">
              <ElDatePicker v-model="customTimeEx"
              type="date"
              :clearable="false"
              placeholder="选择日期"
              popper-class="custom-datepicker-popper"
              @change ="changeDateEx"

              > 
            </ElDatePicker>
            </div>
          <div class="date-time">
              <ElSlider  v-model="currentTimeEx" :min="1" :max="24" :step="1" show-stops :marks="marks"
              show-tooltip 
              @click="choseTimeEx"/> 
          </div>
        </div>
        <div class="second-map item">
            <div class="date-item data">
              <ElDatePicker v-model="customTime"
              type="date"
              :clearable="false"
              placeholder="选择日期"
              popper-class="custom-datepicker-popper"
              @change ="changeDate"
              > 
            </ElDatePicker>
            </div>
          <div class="date-time">
              <ElSlider  v-model="currentTime" :min="1" :max="24" :step="1" show-stops :marks="marks"
              show-tooltip 
              @click="choseTime"/> 
          </div>
        </div>
      </div>
      <!-- <img src="./img/frame.png" style="width: 100%; height: 100%" /> -->
  </div>
</template>

<script setup lang="ts">
import { onUnmounted, ref, onMounted, computed, nextTick } from "vue"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import * as mapWork from "./map"
import { useWidget } from "@mars/common/store/widget"
import { ElDatePicker, ElSlider } from "element-plus"
import { parseTime } from "@mars/utils/common"

// 启用map.ts生命周期
useLifecycle(mapWork)
const { disable, currentWidget, disableAll } = useWidget()

const currentTime = ref()
const customTime = ref()
const currentTimeEx = ref()
const customTimeEx = ref()

const marks = Array.from({ length: 24 }, (_, i) => i + 1)
  .reduce((acc, hour) => ({
    ...acc,
    [hour]: `${hour}点`
  }), {})

function generateRecentDates(days = 7) {
  const now = new Date()
  currentTime.value = now.getHours() - 2
  customTime.value = now
  currentTimeEx.value = now.getHours() - 3
  customTimeEx.value = now
}

function choseTime(e: any) {
  initMapNoise()
}

function choseTimeEx(e: any) {
  initMapExNoise()
}

function changeDate() {
  if (!customTime.value) { return }
  
  const date = new Date(customTime.value)

  initMapNoise()
}

function changeDateEx() {
  if (!customTimeEx.value) { return }
  
  const date = new Date(customTimeEx.value)

  console.log("changeDateEx=====", date)
   // 加载对比地图数据
   initMapExNoise()
}


const formattedDateTime = computed(() => {
  try {
    
    const [yearStr, monthStr, dayStr] = parseTime(customTime.value, "{y}-{m}-{d}").split("-")
    return formatDateWithHour(yearStr, monthStr, dayStr, currentTime.value)

  } catch (error) {
    console.error("日期格式化错误:", error)
    return "" // 或返回默认值
  }
})
const formattedDateTimeEx = computed(() => {
  try {
    
    const [yearStr, monthStr, dayStr] = parseTime(customTimeEx.value, "{y}-{m}-{d}").split("-")
    return formatDateWithHour(yearStr, monthStr, dayStr, currentTimeEx.value)

  } catch (error) {
    console.error("日期格式化错误:", error)
    return "" // 或返回默认值
  }
})

// 日期格式化函数
function formatDateWithHour(year: string, month: string, day: string, hour: number | string): string {
  let hourNum = Number(hour) - 1 // 
  
  // 处理负数情况（比如 hour 原本是 0，减 1 后变成 -1）
  if (hourNum < 0) {
    hourNum = 0 // 可以设为 0，或者根据需求调整
  }
  
  const paddedHour = String(hourNum).padStart(2, "0")
  return `${year}-${month}-${day} ${paddedHour}:00:00`
}

onMounted(() => {
  generateRecentDates()
  // mapWork.flyToModel("204013")
  nextTick(() => {
    // 加载主地图数据
    initMapNoise()

    // 加载对比地图数据
    initMapExNoise()
  })
  
  // 图层加载完成回调
  // mapWork.onLayerLoaded("204013")
})

function initMapNoise() {
  mapWork.getMapNoiseManager().add3DLayer(formattedDateTime.value.substring(0, 13).replace(" ", "_"))
}

function initMapExNoise() {
  mapWork.getMapExNoiseManager().add3DLayer(formattedDateTimeEx.value.substring(0, 13).replace(" ", "_"))

}

// 取消工具栏高亮
onUnmounted(() => {
  
})
</script>
<style lang="less" scoped>
.detailed-plan {
  position: absolute;
  bottom: 10px;
  // right: 55px;
  // height: 100%;
  width: 100%;
  z-index: 999;
  padding: 0 55px;
}
.date-time{
  width: 100%;
  height: 8px;
  cursor: pointer;

 /* 强制穿透 scoped 样式 */
 ::v-deep .el-slider{
  height: 8px;
 }
  ::v-deep .el-slider__bar {
  background-color: #1281f8 !important;
  height: 8px;
  }
  ::v-deep .el-slider__runway {
    background-color: #f0f0f0 !important;
    height: 8px;
  }

  
  ::v-deep .el-slider__marks-stop {
    width: 8px;
    height: 8px;
    background-color: #409EFF;
    border-radius: 50%;
    
  }

  ::v-deep .el-slider__marks-text {
    // margin-top: 8px;
    // font-size: 12px;
    color: #f0f0f0;
    transform: translateY(-30%);
  }
}
.data-select {
  margin-top: 3px;
  margin-bottom: 15px;
  .item{
    width: 48%;
  }
}



.data-select  {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  // background-color: #526b85;
  line-height: 30px;
  .date-item {
    font-size: 16px;
    margin-bottom: 8px;
    position: relative;
    text-align: center;
    border-right: 1px solid #f7eeee;
    cursor: pointer;
    &.data{
      width: 150px;
    }
    &.active {
      background-color: #559de9;
    }
    ::v-deep .el-input{
      width: 100% !important;
    }
    ::v-deep .el-input__wrapper{
      display: flex;
      width: 100% !important;
      .el-input__inner{
        text-align: center;
      }
    }
  }
}
::v-deep .el-picker-panel__body-wrapper{
  .el-picker-panel__body{
    background-color: #409EFF !important;
  }
    
}


</style>
